/**
 * 全局样式文件
 * 定义项目中通用的样式变量和类
 */

/* 颜色变量 - 转换为CSS自定义属性 */
:root {
	--primary-color: #3CC45F; /* 主色调绿色 */
	--secondary-color: #1976D2; /* 辅助色蓝色 */
	--success-color: #3CC45F; /* 成功色 */
	--warning-color: #FF9800; /* 警告色 */
	--error-color: #F44336; /* 错误色 */
	--info-color: #2196F3; /* 信息色 */

	/* 文字颜色 */
	--text-primary: #333333; /* 主要文字 */
	--text-secondary: #666666; /* 次要文字 */
	--text-disabled: #999999; /* 禁用文字 */
	--text-placeholder: #CCCCCC; /* 占位符文字 */

	/* 背景颜色 */
	--bg-primary: #ffffff; /* 主要背景 */
	--bg-secondary: #f5f5f5; /* 次要背景 */
	--bg-disabled: #f8f8f8; /* 禁用背景 */

	/* 边框颜色 */
	--border-color: #e0e0e0; /* 边框颜色 */
	--border-light: #f0f0f0; /* 浅色边框 */

	/* 圆角 */
	--border-radius-small: 8rpx; /* 小圆角 */
	--border-radius-medium: 16rpx; /* 中圆角 */
	--border-radius-large: 24rpx; /* 大圆角 */

	/* 间距 */
	--spacing-xs: 8rpx; /* 超小间距 */
	--spacing-sm: 16rpx; /* 小间距 */
	--spacing-md: 24rpx; /* 中间距 */
	--spacing-lg: 32rpx; /* 大间距 */
	--spacing-xl: 40rpx; /* 超大间距 */

	/* 字体大小 */
	--font-size-xs: 20rpx; /* 超小字体 */
	--font-size-sm: 24rpx; /* 小字体 */
	--font-size-md: 28rpx; /* 中字体 */
	--font-size-lg: 32rpx; /* 大字体 */
	--font-size-xl: 36rpx; /* 超大字体 */
	--font-size-xxl: 48rpx; /* 特大字体 */

	/* 阴影 */
	--shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 浅阴影 */
	--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); /* 中阴影 */
	--shadow-heavy: 0 8rpx 24rpx rgba(0, 0, 0, 0.2); /* 重阴影 */
}

/* 通用类 */
.container {
	width: 100%;
	min-height: 100vh;
	background-color: var(--bg-secondary);
}

.section {
	padding: var(--spacing-lg);
}

.card {
	background-color: var(--bg-primary);
	border-radius: var(--border-radius-medium);
	box-shadow: var(--shadow-light);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-primary {
	color: var(--text-primary);
}

.text-secondary {
	color: var(--text-secondary);
}

.text-disabled {
	color: var(--text-disabled);
}

.text-success {
	color: var(--success-color);
}

.text-warning {
	color: var(--warning-color);
}

.text-error {
	color: var(--error-color);
}

.bg-primary {
	background-color: var(--bg-primary);
}

.bg-secondary {
	background-color: var(--bg-secondary);
}

.border-radius-small {
	border-radius: var(--border-radius-small);
}

.border-radius-medium {
	border-radius: var(--border-radius-medium);
}

.border-radius-large {
	border-radius: var(--border-radius-large);
}

.shadow-light {
	box-shadow: var(--shadow-light);
}

.shadow-medium {
	box-shadow: var(--shadow-medium);
}

/* 按钮样式 */
.btn-primary {
	background-color: var(--primary-color);
	color: #ffffff;
	border: none;
	border-radius: var(--border-radius-medium);
	font-size: var(--font-size-md);
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-primary:active {
	opacity: 0.8;
}

.btn-secondary {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	border: 2rpx solid var(--border-color);
	border-radius: var(--border-radius-medium);
	font-size: var(--font-size-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-secondary:active {
	background-color: var(--border-light);
}

/* 输入框样式 */
.input {
	width: 100%;
	height: 80rpx;
	background-color: var(--bg-disabled);
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-md);
	font-size: var(--font-size-md);
	color: var(--text-primary);
	border: 2rpx solid transparent;
}

.input:focus {
	border-color: var(--primary-color);
	background-color: var(--bg-primary);
}

/* 文本省略 */
.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-ellipsis-2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.text-ellipsis-3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}